<template>
  <el-table 
    :data="tableData" 
    border 
    style="width: 100%"
    v-bind="getTableProps"
  >
    <template v-for="col in propList.tColumnConfig" :key="col.prop">
      <!-- 普通列 -->
      <el-table-column 
        v-if="!col.isSlot"
        :prop="col.prop" 
        :label="col.label" 
        :width="col.width || '100'"
        :align="col.align"
        :sortable="col.sortable"
      />
      
      <!-- 插槽列 -->
      <el-table-column 
        v-else
        :label="col.label" 
        :width="col.width || '100'"
        :align="col.align"
      >
        <template #default="scope">
          <slot 
            :name="col.prop" 
            :row="scope.row" 
            :index="scope.$index"
            :column="col"
          />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'

// 类型定义
interface ColumnConfig {
  prop: string
  label: string
  width?: string | number
  isSlot?: boolean
  align?: 'left' | 'center' | 'right'
  sortable?: boolean
}

interface TableProps {
  propList: {
    tColumnConfig: ColumnConfig[]
  }
  mockData: {
    value: any[]
  }
  slotName?: string
  // 可以添加其他el-table支持的属性
  size?: 'default' | 'large' | 'small'
  stripe?: boolean
  // ... 其他属性
}

const props = defineProps<TableProps>()

const tableData = ref<any[]>([])

// 透传el-table的属性
const getTableProps = computed(() => {
  const { propList, mockData, slotName, ...tableProps } = props
  return tableProps
})

onMounted(() => {
  tableData.value = props.mockData.value
})

// 暴露方法，方便父组件调用
defineExpose({
  getTableData: () => tableData.value,
  setTableData: (data: any[]) => {
    tableData.value = data
  }
})
</script>